<template>
  <div style="width:100%;">
    <el-main>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="修改密码" name="first">
          <div class="usermanage">
            <el-form ref="form" :model="form" label-width="82px">
              <el-form-item label="手机号">
                <el-input size="small" v-model="form.phone" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="原密码">
                <el-input
                  size="small"
                  placeholder="请输入原密码"
                  v-model="form.oldPassword"
                  type="password"
                ></el-input>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input
                  size="small"
                  placeholder="请输入新密码"
                  v-model="form.newPassword"
                  type="password"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认新密码">
                <el-input
                  size="small"
                  v-model="form.sureNewPassword"
                  type="password"
                  placeholder="请输入新密码"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="width:150px;background-color:#b3302e;"
                  @click="onSubmitPassword"
                >提交
                </el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="更换手机号" name="second">
          <div class="usermanage">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="原手机号">
                <el-input size="small" v-model="form.phone" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="新手机号">
                <el-input
                  size="small"
                  placeholder="请输入新的手机号"
                  v-model="form.newPhone"
                  maxlength="11"
                ></el-input>
              </el-form-item>
              <el-form-item label="验证码">
                <el-input
                  size="small"
                  v-model="form.code"
                  placeholder="请输入验证码"
                  maxlength="4"
                  style="width:150px;margin-right:10px;"
                ></el-input>
                <el-button v-show="sendAuthCode" @click="getAuthCode">获取验证码</el-button>
                <span v-show="!sendAuthCode"> <span class="auth_text_blue">{{auth_time}} </span> 秒之重新发送验证码</span>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="width:150px;background-color:#b3302e;"
                  @click="onSubmit"
                >提交
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: "first",
        form: {
          phone: this.globalData.userInfo.phone,
          oldPassword: "",
          newPassword: "",
          sureNewPassword: "",
          newPhone: "",
          code: "",
          name: "",
          region: "",
          date1: "",
          date2: "",
          delivery: false,
          type: [],
          resource: "",
          desc: "",
        },
        sendAuthCode: true, /*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
        auth_time: 0, /*倒计时 计数器*/
      };
    },

    methods: {
      onSubmitPassword(){
        if (!this.form.oldPassword) {
          this.$message.error("请输入原密码");
        } else if (!this.form.newPassword) {
          this.$message.error("请输入新密码");
        } else if (!this.form.sureNewPassword) {
          this.$message.error("请输入确认密码");
        } else if (this.form.newPassword !== this.form.sureNewPassword) {
          this.$message.error("两次输入密码不同");
        } else {
          let obj = {
            token: this.globalData.token,
            oldpassword: this.form.oldPassword,
            password: this.form.newPassword
          };
          this.$post("/User/updateUserPass", obj).then(res => {
            if (res.code === "200") {
              this.$message.success(res.message);
            } else {
              this.$message.error(res.message);
            }
          });
        }
      },
      onSubmit() {
        if (!this.form.newPhone) {
          this.$message.error("请输入新手机号");
        } else if (!this.form.code) {
          this.$message.error("请输入验证码");
        } else {
          let obj = {
            token: this.globalData.token,
            phone: this.form.newPhone,
            phoneCode: this.form.code
          };
          this.$post("/User/changeUserPhone", obj).then(res => {
            if (res.code === "200") {
              this.$router.push({path: '/'});
            } else {
              this.$message.error(res.message);
            }
          });
        }
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleClose(tab, event) {
        console.log(tab, event);
      },
      handleOpen(tab, event) {
        console.log(tab, event);
      },
      getAuthCode () {
        if (!this.form.newPhone) {
          this.$message.error("请输入新手机号");
        } else {
          let obj = {
            token: this.globalData.token,
            phone: this.form.newPhone,
          };
          this.$post("/Sms/pushPhoneCode", obj).then(res => {
            if (res.code === "200") {
//              this.$message.success(res.message);
              this.sendAuthCode = false;
              this.auth_time = 60;
              let auth_timetimer = setInterval(() => {
                this.auth_time--;
                if (this.auth_time <= 0) {
                  this.sendAuthCode = true;
                  clearInterval(auth_timetimer);
                }
              }, 1000);
            } else {
              this.$message.error(res.message);
            }
          });
        }
      }
    }
  };
</script>

<style>
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

  .usermanage {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-container {
    width: 100%;
  }
</style>
